<template>
    <div>
        <el-form :model="form" :rules="rules" ref="form" label-width="98px">
            <el-tabs v-model="step">
                <el-tab-pane label="基本信息" name="first">
                    <!-- 基本信息 -->
                    <el-form-item label="机构角色" prop="role">
                        <el-select v-model="form.role" filterable placeholder="请选择">
                            <el-option v-for="(name,code) in company_roles" :key="code" :label="name" :value="code"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="机构名称" prop="name">
                        <el-input v-model="form.name" placeholder="请输入机构名称" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="机构简称" prop="shortName">
                        <el-input v-model="form.shortName" placeholder="请输入机构简称" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="机构星级" prop="rate">
                        <el-rate v-model="form.rate"></el-rate>
                    </el-form-item>
                    <el-form-item label="上级机构" prop="parentId">
                        <el-select v-model="form.parentId" filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="searchCompany" :loading="searchLoading">
                            <el-option v-for="item in companies" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="机构类型" prop="companyType">
                        <el-select v-model="form.companyType" filterable placeholder="请选择">
                            <el-option v-for="(desc,code) in company_types" :key="code" :label="desc" :value="code"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="联系地址" prop="regionsArr">
                        <el-cascader v-model="form.regionsArr" placeholder="试试搜索：地址" :options="regions_list" filterable
                                     :props="{value:'name',label:'name',expandTrigger: 'hover'}"></el-cascader>
                    </el-form-item>
                    <el-form-item label="详细地址" prop="address">
                        <el-input v-model="form.address" autocomplete="off" placeholder="机构详细办公地址" maxlength="250" show-word-limit></el-input>
                    </el-form-item>
                    <el-form-item label="固定电话" prop="mobile">
                        <el-input v-model="form.mobile" autocomplete="off" placeholder="机构联系电话" maxlength="30" show-word-limit></el-input>
                    </el-form-item>

                </el-tab-pane>
                <el-tab-pane label="供应商信息" name="second">
                    <!-- 供应商信息 -->
                    <el-form-item label="供应商类型" prop="supplierType">
                        <el-select v-model="form.supplierType" placeholder="请选择供应商类型">
                            <el-option :label="desc" :value="code" v-for="(desc,code) in supplier_types" :key="code"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="联系人姓名" prop="contactName">
                        <el-input v-model="form.contactName" placeholder="请输入供应商联系人姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人手机号" prop="contactPhone">
                        <el-input v-model="form.contactPhone" placeholder="请输入供应商联系人手机号" maxlength="11" show-word-limit></el-input>
                    </el-form-item>
                </el-tab-pane>
                <el-tab-pane label="其他信息" name="third">
                    <!-- 其他信息 -->
                    <el-form-item label="开票名称" prop="ticketName">
                        <el-input v-model="form.ticketName" placeholder="机构开票名称" autocomplete="off" maxlength="250" show-word-limit></el-input>
                    </el-form-item>
                    <el-form-item label="税号" prop="registerNo">
                        <el-input v-model="form.registerNo" placeholder="机构税号" autocomplete="off" maxlength="25" show-word-limit></el-input>
                    </el-form-item>
                    <el-form-item label="开户行名称" prop="bankName">
                        <el-input v-model="form.bankName" placeholder="机构开户行名称" autocomplete="off" maxlength="200" show-word-limit></el-input>
                    </el-form-item>
                    <el-form-item label="开户行账户" prop="bankNo">
                        <el-input v-model="form.bankNo" placeholder="机构开户行账户" autocomplete="off" maxlength="50" show-word-limit></el-input>
                    </el-form-item>
                    <el-form-item label="注册时间" prop="buildAt">
                        <el-date-picker v-model="form.buildAt" value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="官网地址" prop="url">
                        <el-input v-model="form.url" autocomplete="off" maxlength="200" show-word-limit class="input-with-select">
                            <el-select v-model="form.urlPrepend" slot="prepend" placeholder="请选择">
                                <el-option label="http://" value="http://"></el-option>
                                <el-option label="https://" value="https://"></el-option>
                            </el-select>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="注册地址" prop="registerAddress">
                        <el-input v-model="form.registerAddress" autocomplete="off" maxlength="250" show-word-limit></el-input>
                    </el-form-item>
                    <el-form-item label="注册固定电话" prop="registerPhone">
                        <el-input v-model="form.registerPhone" autocomplete="off" maxlength="20" show-word-limit></el-input>
                    </el-form-item>
                    <el-form-item label="机构备注" prop="desc">
                        <el-input v-model="form.desc" autocomplete="off" maxlength="250" show-word-limit></el-input>
                    </el-form-item>
                </el-tab-pane>
                <el-tab-pane label="营业执照" name="fourth">
                    <el-form-item label="营业执照" prop="licencePic">
                        <el-upload
                            class="avatar-uploader"
                            :action="basePath + '/upload/license'"
                            :headers="uploadParam"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="upload_img_url" :src="upload_img_url" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-tab-pane>
            </el-tabs>
            <el-button class="save_button" type="primary" size="medium" icon="el-icon-circle-plus-outline" @click="saveCompany">{{ form.id ? '保存' : '添加' }}</el-button>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "add",
        data() {
            return {
                basePath: basePath,
                uploadParam: {'X-CSRF-TOKEN': window.csrf_token},
                upload_img_url: null,
                step: 'first',
                form: {type: 1, rate: 3, state: 1, ticketType: 1, belongTo: [], urlPrepend: 'https://'},
                rules: {
                    role: [{required: true, message: '请选择机构角色', trigger: 'change'}],
                    name: [{required: true, message: '请输入机构名称', trigger: 'blur'}],
                    regionsArr: [{required: true, message: '请选择机构所在地', trigger: 'change'}],
                },
                searchLoading: true,
                companies: [],//机构列表
                supplier_types: [],//供应商类型
                company_roles: [],//机构角色
                company_types: [],//机构类型
                regions_list: [],//省市县数据
            };
        },
        mounted() {
            const _this = this;
            axios.get("/libs/pcaa.json").then(function (res) {
                _this.regions_list = res.children;
            });
            if (this.$route.query.id) {
                const _this = this;
                axios.get(basePath + '/company/info/' + this.$route.query.id).then(function (res) {
                    if (res.success) {
                        //成功
                        _this.form = res.data;
                        _this.form.role += "";
                        _this.form.companyType += "";
                        _this.form.supplierType += "";
                        if (res.data.url) {
                            if (res.data.url.indexOf('https') == -1) {
                                _this.form.urlPrepend = 'http://';
                                _this.form.url = res.data.url.split('http://')[1];
                            } else {
                                _this.form.urlPrepend = 'https://';
                                _this.form.url = res.data.url.split('https://')[1];
                            }
                        }
                        _this.form.rate -= 0;
                        _this.upload_img_url = res.data.licencePic;
                    }
                });
            }
            axios.get(basePath + '/company/config').then(function (res) {
                if (res.success) {
                    _this.company_roles = res.data.company_roles;
                    _this.supplier_types = res.data.supplier_types;
                    _this.company_types = res.data.company_types;
                }
            });
            axios.post(basePath + '/company/list?pageSize=20').then(function (res) {
                _this.companies = res.data;
                _this.searchLoading = false;
            });
        }
        ,
        methods: {
            searchCompany(key) {
                const _this = this;
                _this.searchLoading = true;
                axios.post(basePath + '/company/list?pageSize=20', {key: key}).then(function (res) {
                    _this.searchLoading = false;
                    _this.companies = res.data;
                    _this.companies.unshift({id: 0, name: '请选择'});
                });
            }
            ,
            saveCompany() {
                if (this.form.id) {
                    const _this = this;
                    this.$confirm("确定修改机构信息吗?").then(function () {
                        _this.doSave();
                    });
                } else {
                    this.doSave();
                }
            }
            ,
            doSave() {
                const _this = this;
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        axios.post(basePath + '/company/save', _this.form).then(function (res) {
                            _this.$message({
                                message: res.msg,
                                type: (res.success ? 'success' : 'error')
                            });
                            if (res.success) {
                                //添加成功
                                _this.$router.push('/company/index');
                            }
                        });
                    } else {
                        return false;
                    }
                });
            }
            ,
            handleAvatarSuccess(res, file) {
                if (res.success) {
                    this.upload_img_url = res.data.link;
                    this.form.licencePic = res.data.file_path;
                } else {
                    this.$message.error(res.msg);
                }
            }
            ,
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
                const isLt5M = file.size / 1024 / 1024 < 5;
                if (!isJPG) {
                    this.$message.error('上传图片只能是 JPG/PNG 格式!');
                }
                if (!isLt5M) {
                    this.$message.error('上传图片大小不能超过 5MB!');
                }
                return isJPG && isLt5M;
            }
            ,
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .main_content {
        position: relative;

        .el-form {
            position: relative;
            padding-bottom: 55px;
            height: calc(100% - 55px);

            .el-tabs {
                height: 100%;

                .el-rate {
                    padding-top: 10px;
                }

                .avatar-uploader {
                    cursor: pointer;
                    position: relative;
                    overflow: hidden;
                }

                .avatar-uploader .avatar-uploader-icon:hover {
                    border-color: #409EFF;
                }

                .avatar-uploader-icon {
                    border-radius: 6px;
                    border: 1px dashed #d9d9d9;
                    font-size: 28px;
                    color: #8c939d;
                    width: 750px;
                    height: 500px;
                    line-height: 500px;
                    text-align: center;
                }

                .avatar {
                    width: 750px;
                    height: 500px;
                    display: block;
                }

                .img_previous_url {
                    width: 100%;
                }
            }

            .el-button.save_button {
                position: absolute;
                bottom: 15px;
                right: 15px;
            }
        }
    }
</style>
